<template>
  <div class="productImageContainer">
    <div class="deviceImgContainer">
      <img
        class="deviceImg"
        :class="{ imgDark: this.darkMode === 'dark' }"
        src="../../assets/img/product.png"
      />
    </div>
    <!-- 公司logo -->
    <div class="logoContainer">
      <img class="logoImg" src="../../assets/img/logo.png" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    darkModeProp: {
      type: String,
      default: "light",
    },
  },
  data() {
    return {
      darkMode: "light",
    };
  },
  mounted() {
    this.darkMode = this.darkModeProp;
  },
  watch: {
    darkModeProp(newVal) {
      this.darkMode = newVal;
    },
  },
};
</script>
<style scoped>
.productImageContainer {
  widows: 100%;
  display: flex;
  flex-direction: column;
}
.productImageContainer .deviceImgContainer {
  width: 100%;
  flex-direction: row;
  justify-content: center;
  display: flex;
  /* background-color: aquamarine; */
}

/* 暗黑模式下，图片半透明 */
.productImageContainer .deviceImgContainer .imgDark {
  opacity: 0.86;
}

.productImageContainer .deviceImgContainer .deviceImg {
  width: 252px;
  height: 252px;
  /* background-color: brown; */
}

.productImageContainer .logoContainer {
  width: 100%;
  height: 18px;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  display: flex;
  margin-bottom: 10px;
  /* background-color: brown; */
}

.productImageContainer .logoContainer .logoImg {
  width: 70px;
  height: 18px;
  /* background-color: #00ff00; */
}
</style>
